<?php
/**
 * Created by PhpStorm.
 * User: nhson219
 * Date: 9/11/14
 * Time: 2:17 PM
 */
?>
<div id="editMilestone" class="col-lg-12" style="background:#fff;padding:15px;font-family: 'UTM-Hel'">
    <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#milestones" role="tab" data-toggle="tab">Milestones</a></li>
        <li><a href="#file" role="tab" data-toggle="tab">File</a></li>
        <li><a href="#message" role="tab" data-toggle="tab">Message</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active fade in" id="milestones">
            <form id="frm-edit-milestone"  class="form-milestone" method="POST">
                <div class="col-lg-12 col-md-12 col-sm-12 no-padding">
                    <h1><?php echo $this->lang->line('Milestone');?></h1>
                    <!--            <input type="hidden" name="--><?php //echo $this->security->get_csrf_token_name(); ?><!--" value="--><?php //echo $this->security->get_csrf_hash(); ?><!--" />-->
                    <div class="form-group">
                        <label class="col-sm-5 control-label" for="exampleInputEmail1"><?php echo $this->lang->line('Milestone')?></label>
                        <label style="text-align: left" class="col-sm-5 control-label" for="exampleInputEmail1">Số tiền bid : <?php echo $sum_bid?></label>
                    </div>
                    <span style="display: none" id="project_id"><?php if(isset($project) == TRUE ) echo $project->id; else echo $project_id?></span>
                    <div class="col-lg-12 col-md-12 col-sm-12" id="item-milestone">

                        <?php
                            if($rows_projects_milestones->num_rows() > 0){
                                foreach($rows_projects_milestones->result() as $item){
                                    $data['id'] = $item->id;

                        ?>
                            <div style="text-align: center;" class="col-lg-12">
                                <div class="col-lg-6">
                                    <input type="text" class="a" style="position: relative" disabled="" value="<?php echo $item->name;?>">
                                    <?php
                                    if($item->status == 1){
                                        echo "<span style='position: absolute;right: 30px;top: 22px;color: red;font-weight: bold;'>Dev đã hoàn thành</span>";
                                    }
                                    if($item->status == 2){
                                        echo "<span style='position: absolute;right: 30px;top: 22px;color: red;font-weight: bold;'>Hoàn thành</span>";
                                    }
                                    if($item->status == 0){
                                        echo "<span style='position: absolute;right: 30px;top: 22px;color: red;font-weight: bold;'>Chưa hoàn thành</span>";
                                    }

                                    ?>
                                </div>
                                <span id="percent-milestone<?php echo $item->id?>" class="percent-milestone col-lg-2"><?php echo $item->fee?>&nbsp; USD</span>
                                <?php
                                    if(isProgrammer()){
                                        if($item->status == 0){
                                ?>
                                <span class="col-lg-2" style="height: 45px;line-height: 60px;"><a data-toggle="modal" href="#modalRequestMilestone<?php echo $item->id?>">Gửi yêu cầu</a></span>
                                <?php
                                        $this->load->view('project/modalRequestMilestone',$data);
                                    }
                                    if($item->status == 1){
                                ?>
                                <span class="col-lg-2" style="height: 45px;line-height: 60px;">
                                    <a data-toggle="modal" href="#modalwithdrawRequestMilestone<?php echo $item->id?>">Rút yêu cầu
                                    </a>
                                </span>
                                <?php
                                        $this->load->view('project/modalWithDrawRequestMilestone',$data);
                                    } }
                                    if(isBuyer()){
                                        if($item->status == 0){
                                ?>
                                <span class="col-lg-2" style="height: 45px;line-height: 60px;"><a data-toggle="modal" href="#modalcompleteMilestone<?php echo $item->id?>">Hoàn thành ngay</a></span>

                                <?php
                                        $this->load->view('project/modalcompleteMilestone',$data);
                                    }
                                    if($item->status == 1){
                                ?>
                                <span class="col-lg-2" style="height: 45px;line-height: 60px;">
                                    <a data-toggle="modal" href="#modalacceptMilestone<?php echo $item->id?>">Đồng ý</a> |
                                    <a data-toggle="modal" href="#modaldeniedMilestone<?php echo $item->id?>">Hủy</a>
                                </span>
                                <?php
                                        $this->load->view('project/modalacceptMilestone',$data);
                                        $this->load->view('project/modaldeniedMilestone',$data);
                                    } ?>
                                        <span class="col-lg-1" style="height: 45px;line-height: 60px;"><a data-toggle="modal" href="#modalbonusMilestone<?php echo $item->id?>">Thưởng</a></span>
                                <?php $this->load->view('project/modalbonusMilestone',$data);
                                    if($item->status == 0){
                                ?>
                                        <span style="height: 45px;line-height: 60px;" class="col-lg-1"><a onclick="confirm('Bạn có muốn xóa milestone')" href="<?php echo site_url('project/removeOneMilestone/'.$item->id)?>">Xóa</a></span>
                                <?php    } }?>
                            </div>
                                    <span style="text-align: center;" class="glyphicon glyphicon-arrow-down col-lg-6"></span>
                        <?php
                                }
                        ?>
                            <div style="text-align: center;" class="col-lg-12">
                            <?php
                                if( ($sum_milestone->fee == $sum_bid) && (isBuyer()) ){
                                    $class = "";
                                    $onclick = "onclick='completeProject()'";
                                }
                                else{
                                    $class = "opacity";
                                    $onclick = "";
                                }
                            ?>
                                <div class="col-lg-6">
                                    <a class="btn-similar-project btn-complete <?php echo $class?>" <?php echo $onclick?>  ><?php echo $this->lang->line('Complete')?></a>
                                </div>
                                <div id="error-editMilestone" class="error col-lg-3">

                                </div>
                            </div>

                            <?php
                                if($sum_bid > $sum_milestone->fee){
                            ?>
                            <div style="text-align: center;" class="col-lg-3">
                                <a id="create-milestone" class="btn-similar-project btn-complete">Tạo thêm milestone</a>
                            </div>
                            <?php } ?>
                        <?php
                            }

                        ?>
                    </div>
                    <div id="save-milestone" style="display: none">
                        <div style="text-align: center;" class="col-lg-12">
                            <button style="margin:0 auto;" type="button" id="update-milestone" class="btn-similar-project btn-complete">
                                <?php echo $this->lang->line('Save');?>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div><!-- end tab milestones-->

        <div class="tab-pane fade in" id="file" style="padding-top: 30px;">
            <div id="list-download-file">
                <?php $this->load->view('project/listDownloadFile')?>
            </div>
            <form enctype="multipart/form-data" name="upload-file" class="form-milestone" />
                <div class="form-group">
                    <input id="file-3" name="file[]" type="file" multiple=true>
                </div>

                <div class="form-group">
                    <button type="submit" id="btn-upload-file" class="btn btn-primary">Tải file</button>

                </div>
            </form>
        </div><!-- end tab file -->

        <div class="tab-pane fade in" id="message">
            <div id="show-project-message">
               <?php $this->load->view("project/showProjectMessage");?>
            </div><!--end show message-->
            <div id="add-project-message" style="margin:20px 0px">
                <?php $this->load->view("project/addProjectMessage");?>      
            </div><!-- end add message-->
        </div><!-- end tab message -->

        
    </div>


</div>
<script type="text/javascript" src="<?php echo base_url() ?>app/js/fileinput.min.js"></script>
<script type="text/javascript">
    var form = document.forms.namedItem("upload-file");
    var projects_id = document.getElementById('project_id').innerHTML;

    form.addEventListener('submit' ,function (ev) {
        var title = JSON.stringify($("input[name='title[]']").serializeArray());
        var desccription = JSON.stringify($("input[name='description[]']").serializeArray());

        var oData = new FormData(document.forms.namedItem("upload-file"));
        oData.append('projects_id',projects_id);
        oData.append('title',title);
        oData.append('description',desccription);
        var oReq = new XMLHttpRequest();
        oReq.open("POST", '<?php echo base_url()."index.php/project/uploadFile"?>', true);
        oReq.onload = function (oEvent) {
            if (oReq.status == 200) {
//                location.reload();
                $("#list-download-file").load('<?php echo base_url()."index.php/project/listDownloadFile"?>',{'project_id': projects_id})
            } else {
                console.log("Error " + oReq.status + " occurred uploading your file.<br \/>");
            }
        };

        oReq.send(oData);
        ev.preventDefault();
    }, false);
    $("#file-3").fileinput({
        'showUpload':false,
        'showCaption':false,
        'previewFileType':'any',
        browseClass: "btn btn-primary btn-md",
        allowedPreviewTypes : ['image','other'],
        'previewSettings' : {
            image: {width: "60px", height: "50px"},
            other: {width: "160px", height: "50px"}
        },
        'previewTemplates' : {

            image: '<div class="col-lg-12"><div class="col-lg-2 file-preview-frame" id="{previewId}">\n' +
                '   <img src="{data}" class="file-preview-image" title="{caption}" alt="{caption}">\n'+'{caption}'+'</div>'+
                '<div class="col-lg-5"> <input placeholder="Nhập tên file" name="title[]" type="text" style="margin-bottom:20px;" />' +
                '<input type="text" placeholder="Mô tả file" name="description[]" style="margin-bottom:20px;" /></div></div>',



            text: '<div class="col-lg-12"><div class="col-lg-2 file-preview-frame" id="{previewId}">\n'+'<div class="file-preview-text" title="{caption}">\n' +
                ' {data}\n' +'</div>\n'+'{caption}'+'</div>'+'<div class="col-lg-5"> <input placeholder="Nhập tên file" name="title[]" type="text" style="margin-bottom:20px;" />' +
                '<input type="text" placeholder="Mô tả file" name="description[]" style="margin-bottom:20px;" /></div>'+'</div>',

            video: '<div class="col-lg-12"><div class="col-lg-2 file-preview-frame" id="{previewId}" title="{caption}">\n' +
                '   <video width="{width}" height="{height}" controls>\n' +
                '       <source src="{data}" type="{type}">\n' +
                '\n' +
                '   </video>\n'+'{caption}'+'</div>' +
                '<div class="col-lg-5"> <input placeholder="Nhập tên file" name="title[]" type="text" style="margin-bottom:20px;" />' +
                '<input type="text" placeholder="Mô tả file" name="description[]" style="margin-bottom:20px;" /></div>' +
                '</div>\n',
            audio: '<div class="col-lg-12"> <div class="col-lg-2 file-preview-frame" id="{previewId}" title="{caption}">\n' +
                '   <audio controls>\n' +
                '       <source src="{data}" type="{type}">\n' +
                '     \n' +
                '   </audio>\n'+'{caption}'+'</div>' +
                '<div class="col-lg-5"> <input placeholder="Nhập tên file" name="title[]" type="text" style="margin-bottom:20px;" />' +
                '<input type="text" placeholder="Mô tả file" name="description[]" style="margin-bottom:20px;" /></div>' +
                '</div>',
            flash: '<div class="col-lg-12"><div class="col-lg-2 file-preview-frame" id="{previewId}" title="{caption}">\n' +
                '   <object type="application/x-shockwave-flash" width="{width}" height="{height}" data="{data}">\n' +
                '   </object>\n'+'{caption}'+'</div>' +
                '<div class="col-lg-5"> <input placeholder="Nhập tên file" name="title[]" type="text" style="margin-bottom:20px;" />' +
                '<input type="text" placeholder="Mô tả file" name="description[]" style="margin-bottom:20px;" /></div>' +
                '</div>',
            object: '<div class="col-lg-12"><div class="col-lg-2 file-preview-frame" id="{previewId}" title="{caption}">\n' +
                '    <object data="{data}" type="{type}" width="{width}" height="{height}">\n' +
                '      <param name="movie" value="{caption}" />\n' +
                '   </object>\n'+'{caption}'+'</div>' +
                '<div class="col-lg-5"> <input placeholder="Nhập tên file" name="title[]" type="text" style="margin-bottom:20px;" />' +
                '<input type="text" placeholder="Mô tả file" name="description[]" style="margin-bottom:20px;" /></div>' +
                '</div>',
            other: '<div class="col-lg-12"><div class="col-lg-2 file-preview-frame" id="{previewId}" title="{caption}" >\n' +
                '\n'+'{caption}'+'</div>' +
                '<div class="col-lg-5"> <input placeholder="Nhập tên file" name="title[]" type="text" style="margin-bottom:20px;" />' +
                '<input type="text" placeholder="Mô tả file" name="description[]" style="margin-bottom:20px;" /></div>' +
                '</div>'

        }

    });
    <?php
        if($rows_projects_milestones->num_rows() > 0){
    ?>
        $('html, body').animate({
            scrollTop: ($('.wrap-postbid').offset().top)
        }, 800);
    <?php } ?>
    function completeProject(){
        $.ajax({
            type: "POST",
            url: "<?php echo base_url()."index.php/project/completeProject"?>",
            data: {'project_id':$("#project_id").text()},
            beforeSend : function(){

            },
            success: function (data) {
                data = $.parseJSON(data);
                if(data.status == 'success')
                    window.location = "<?php echo site_url('buyer/viewMyProjects');?>"
                else
                    $('#error-editMilestone').text(data.message);
            }
        });
    }
    $('#create-milestone').click(function(){
        var mil = $("#item-milestone");
        $('<div class="col-lg-12"  style="text-align: center;"> <div class="col-lg-7"><input required type="text" name="name[]" value="" placeholder="'+'<?php echo $this->lang->line('Fill Name Milestone')?>'+'"></div><div class="col-lg-2"><input type="text" name="fee[]" value=""  class="percent-milestone" /><span>USD</span></div><div style="padding-top:10px;" class="col-lg-1"><button type="button" id="btn-remove-milestone" onclick="RemoveItemMilestone()" class="btn-similar-project">'+'<?php echo $this->lang->line('Delete')?>'+'</button></div></div>').appendTo(mil);
        $("#save-milestone").show();
    });
    $('#update-milestone').click(function(){
        var data = JSON.stringify($("input[name='name[]']").serializeArray());
        var fee = JSON.stringify($("input[name='fee[]']").serializeArray());

        $.ajax({
            type: "POST",
            url: "<?php echo base_url()."index.php/project/updateMilestone"?>",
            data: {data : data,fee : fee,projects_id : $("#project_id").text()},
            beforeSend: function(){

            },
            success: function (data) {
                data = $.parseJSON(data);
                if (data.status == 'error') {
                    $('#error-milestone').html(data.message);
                } else {
                    window.location = "<?php echo site_url('project/view/'.$project_id);?>"
                }
            }
        });
    });
</script>